import { defineComponent } from "vue";
import RowView from "../RowView";
import {
  ButtonGroupProps,
  IButtonGroupViewData,
} from "../ButtonGroupView/types";
import ButtonView from "../ButtonView";
export default defineComponent({
  name: "",
  props: ButtonGroupProps,
  setup(_) {
    const renderButton = (item: IButtonGroupViewData) => {
      return (
        <div
          class="flex items-center w-[58px] h-[30px] justify-center text-white text-[12px]"
          onClick={(e) => {
            e.preventDefault();
            e.stopPropagation();
            // item.onClick && item.onClick();
          }}
        >
          {item.text}
        </div>
      );
    };
    const renderLeft = (item: IButtonGroupViewData) => {
      const ButtonView = renderButton(item) as any;
      return (
        <ButtonView
          {...item}
          style={{
            background: `linear-gradient(90deg, #6EDDFF 0%, #00A8FF 100%)`,
            borderRadius: "15px 0px 0px 15px",
            ...((item.style as any) || _.style || {}),
          }}
        />
      );
    };
    const renderRight = (item: IButtonGroupViewData) => {
      const ButtonView = renderButton(item) as any;
      return (
        <ButtonView
          {...item}
          style={{
            background: `linear-gradient(270deg, #5CADFF 0%, #088CFF 100%)`,
            borderRadius: "0px 15px 15px 0px",
            ...((item.style as any) || _.style || {}),
          }}
        />
      );
    };
    const renderSingleButton = () => {
      const item = _.data[0];
      return (
        <ButtonView
          {...item}
          type={item.type}
          style={{
            borderRadius: "15px  15px  15px  15px ",
            ...((item.style as any) || _.style || {}),
          }}
        >
          {item.text}
        </ButtonView>
      );
    };
    return () => {
      if (_.data.length == 1) {
        return renderSingleButton();
      }
      return (
        <RowView>
          {_.data.slice(0, 2).map((e, i) => {
            return i == 0 ? renderLeft(e) : renderRight(e);
          })}
        </RowView>
      );
    };
  },
});
